<template>
	<view class="fillcontent padding-sm">
		<view class="margin-bottom-xs"><uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" :border="false" /></view>
	<view class="cu-list menu" v-for="i in 5" @tap="goFillDetail">
			<view class="cu-item">
				<view class="content padding-tb-sm">
					<view>补液单号：152222</view>
					<view class="text-gray text-sm">2024年11月1日  18:20:15</view>
				</view>
				<view class="action">
					<view class="cu-btn radius">皖A11111</view>
				</view>
			</view>
			<view class="padding-tb-sm padding-lr bg-white">
				<view class="flex bg-white padding-bottom-xs text-gray">
					<view class="flex-sub">补液总量(吨）</view>
					<view class="flex-sub text-right">11</view>
				</view>
				<view class="flex bg-white padding-bottom-xs text-gray">
					<view class="flex-sub">实际补液总量(吨）</view>
					<view class="flex-sub text-right">22</view>
				</view>
				<view class="flex bg-white padding-bottom-xs text-gray">
					<view class="flex-sub">任务数量</view>
					<view class="flex-sub text-right">33</view>
				</view>
			</view>
		</view>
		<!-- <view class="list-wrapper">
			<view class="item" v-for="item in list" :key="item.id" @tap="gotoDetail(item)">
				<view class="item-top u-f-jsb">
					<view>工单号 {{item.orderNo}}</view>
					<view style="color: #407CFF;">
						<text v-if="item.orderStatus===4">补液中</text>
						<text v-if="item.orderStatus===2">已完成</text>
					</view>
				</view>
				<view class="item-content">
					<view class="u-f-jsb">
						<view class="label">预计补液量</view>
						<view>{{item.expectCapacity | kg2ton}}吨</view>
					</view>
					<view class="u-f-jsb">
						<view class="label">实际采购量</view>
						<view>{{item.actualProcureCapacity | kg2ton}}吨</view>
					</view>
					<view class="u-f-jsb">
						<view class="label">实际补液量</view>
						<view>{{item.actualCapacity | kg2ton }}吨</view> 
					</view>
					<view class="u-f-jsb">
						<view class="label">完成时间</view>
						<view>{{item.completeTime || '-'}}</view>
					</view>
				</view>
			</view>
		</view>
	 -->
	 </view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				sum: 0,
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				
			}
		},
		onLoad() {
			// this.getRecords()
		},
		methods: {
			goFillDetail(){
				uni.navigateTo({
					url:"/pages/user/fillRecordDetail"
				})
			},
			getDate(date, addZero = true){
			  date = new Date(date)
			  const year = date.getFullYear()
			  const month = date.getMonth()+1
			  const day = date.getDate()
			  return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			onSubmit(startTime, endTime, dateType) {
				this.startTime = startTime
				this.endTime = endTime
				this.dateType = dateType
				this.getRecords()
			},
			getRecords() {
				this.$http({
					url: this.$api.systemUrl + 'fillstorageorder/listOrderOfCurrentUser' ,
					method:'get',
					data: {
						startTime: this.startTime,
						endTime: this.endTime
					},
					loading: 0
				}).then(res => {
					this.list = res.data.sort((a,b) => {
						console.log(11);
						return b.id - a.id  
					})
					this.sum = this.list.reduce((pre,cur) => {
						return pre + Number(cur.actualCapacity)
					},0)
				})
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: `/pages/index/taskDetail?id=${item.id}&orderNo=${item.orderNo}&completeTime=${item.completeTime || ''}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.fillcontent{
		.cu-list{
			margin-top:20rpx;
		}
	}
	.header {
		width: 100vw;
		position: fixed;
		height: 200rpx;
		background: $color-primary;
		top: 0rpx;
		
		.date {
			// width: 246rpx;
			height: 52rpx;
			color: #ffffff;
			border-radius: 32rpx;
			margin: 30rpx 20rpx 30rpx 50rpx;
			font-size: 34rpx;
		}
		
		.data {
			margin-left: 50rpx;
			view {
				color: #ffffff;
			}
		}
		
	}
	
	.icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 6rpx;
	}
	.list-wrapper {
		margin: 20rpx 0;
		padding-top: 180rpx;
		.item {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 20rpx;
			background: #ffffff;
			padding: 0 30rpx 30rpx 30rpx;
			
			.item-top {
				border-bottom: 1rpx solid #DDDDDD;
				height: 80rpx;
			}
			
			view {
				font-size: 32rpx;
			}
			
			&:not(:last-child) {
				border-bottom: 1rpx solid #E5E5E5;
			}
			
			.item-content {
				.label {
					color: #666666;
					font-size: 24rpx;
				}
				>view {
					line-height: 80rpx;
					color: #999999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
